<template>
  <div id="notice">
    <HeaderBg>
      <Headers :title="$t('notice.title')"/>
    </HeaderBg>
    <div class="list">
      <ul>
        <li v-for="(item,index) in noticeList" :key="index">
          <div class="title-date">
            <div class="titles">
              <div class="title-icon">
                <img src="../../assets/blue_star.png" alt>
              </div>
              <h4>{{item.title}}</h4>
            </div>
            <div class="date">
              <div class="date-icon">
                <img src="../../assets/date-icon.png" alt>
              </div>
              <p>{{item.date}}</p>
            </div>
          </div>
          <div class="details">{{item.detail}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import HeaderBg from "components/HeaderBg";
export default {
  name: "notice",
  data() {
    return {
      noticeList: [
        {
          title: "公告标题",
          date: "2019-07-02",
          detail: "公告标题公告标题公告标题公告标题公告标题公告"
        },
        {
          title: "公告标题",
          date: "2019-07-02",
          detail:
            "公告标题公告标题公告标题公告标题公告标题公告公告标题公告标题公告标题公告标题公告标题公告"
        },
        {
          title: "公告标题",
          date: "2019-07-02",
          detail: "公告标题公告标题公告标题公告标题公告标题公告"
        },
        {
          title: "公告标题",
          date: "2019-07-02",
          detail:
            "公告标题公告标题公告标题公告标题公告标题公告公告标题公告标题公告标题公告标题公告标题公告"
        }
      ]
    };
  },
  components: {
    HeaderBg
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl'
#notice
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  .list
    margin-top rem(160)
    width 100%
    ul
      li
        width 100%
        box-sizing border-box
        padding rem(16) rem(20)
        background-color $listBg
        margin-bottom rem(12)
        text-align left
        .title-date
          display flex
          justify-content space-between
          align-items center
          color $fontColor
          .titles
              display flex
              justify-content flex-start
              align-items center
              font-size rem(15)
              .title-icon
                  width rem(10)
                  height rem(18)
                  img
                    width 100%
                    height 100%
                    object-fit contain
              h4
                margin-left rem(14)
          .date
              display flex
              justify-content flex-start
              .date-icon
                  width rem(12)
                  height rem(12)
                  margin-right rem(10)
                  img
                    width 100%
                    height 100%
                    object-fit contain
              p
                color $tabBarColor
        .details
          color $fontColor
          margin-top rem(8)
          line-height rem(18)
</style>
